<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
			/* 1）先让盒子左右边缘和父盒子的水平中线重叠，然后往回移动自身宽度一半（用定位和子盒子margin来，，一半用定位和子盒子transfrom中的translate移动属性来做
			2. 通过计算左右距离用margin撑开（父盒子要有固定高度）
			3. 使用表格的vertical-align:middle事先垂直居中，父盒子要加display:table-cell;属性才行 */
			.t1 {
				width: 400px;
				height: 400px;
				border: 1px solid #000;
				margin: 100px auto;
			
                
			}
			.t2 {
				width: 200px;
				height: 200px;
				background-color: pink;
				display: inline-block;



			}

        </style>
    </head>
    <body>
    <div class="t1">
    	<div class="t2"></div>
    </div>
    </body>
</html>